<template>
  <div class="mid-box">
    <div class="box1">
      <div class="down-box">
        <el-select v-model="chooseArea" :suffix-icon="CaretBottom" class="m-2">
          <el-option
            v-for="item in chooseAreaList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="content-box">
        <div class="msg-title">综合业务一科</div>
        <div class="msg-box1">
          <div class="pending-box">
            <div class="msg">
              <div class="value">111</div>
              <div class="label">待处理待办</div>
            </div>
            <vue3ScrollSeamless
              class="scroll-wrap"
              :classOptions="pendListScrollOptions"
              :dataList="pendList"
              v-if="pendListScrollOptions.singleWidth > 0"
            >
              <div class="list-box">
                <div
                  class="item-box"
                  id="pendItem"
                  v-for="(item, index) in pendList"
                  :key="index"
                >
                  <div class="avatar">
                    <img
                      src="../../../assets/imgs/avatar1.png"
                      alt=""
                      v-if="index === 1"
                    />
                    <img src="../../../assets/imgs/avatar2.png" alt="" v-else />
                  </div>
                  <div class="number">{{ item.id }}</div>
                  <div class="label">{{ item.company }}</div>
                </div>
              </div>
            </vue3ScrollSeamless>
            <div class="list-box" v-else>
              <div
                class="item-box"
                id="pendItem"
                v-for="(item, index) in pendList"
                :key="index"
              >
                <div class="avatar">
                  <img
                    src="../../../assets/imgs/avatar1.png"
                    alt=""
                    v-if="index === 1"
                  />
                  <img src="../../../assets/imgs/avatar2.png" alt="" v-else />
                </div>
                <div class="number">{{ item.id }}</div>
                <div class="label">{{ item.company }}</div>
              </div>
            </div>
          </div>

          <div class="finish-box">
            <div class="bg">
              <img src="../../../assets/imgs/midFinishBg.png" alt="" />
            </div>
            <div class="msg">
              <div class="value">66</div>
              <div class="label">今日已办理</div>
            </div>
          </div>
        </div>
        <vue3ScrollSeamless
          class="scroll-wrap"
          :classOptions="pendListScrollOptions2"
          :dataList="pendList"
          v-if="pendListScrollOptions2.singleWidth > 0"
        >
          <div class="msg-box2">
            <div
              class="item-box"
              id="pendItem1"
              v-for="(item, index) in pendList"
              :key="index"
            >
              <div class="number">{{ item.id }}</div>
              <div class="avatar-box">
                <img src="@/assets/imgs/salesmanBg.png" alt="" />
              </div>
              <div class="msg-box">
                <div class="tag-box">
                  <div class="item">异常处置</div>
                </div>
                <div class="value-box">
                  <div class="value1-box">
                    <div class="value">15</div>
                    <div class="label">今日待办理</div>
                  </div>
                  <div class="value1-box">
                    <div class="value">5</div>
                    <div class="label">今日已办理</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </vue3ScrollSeamless>
        <div class="msg-box2" v-else>
          <div
            class="item-box"
            id="pendItem1"
            v-for="(item, index) in pendList"
            :key="index"
          >
            <div class="number">{{ item.id }}</div>
            <div class="avatar-box">
              <img src="@/assets/imgs/salesmanBg.png" alt="" />
            </div>
            <div class="msg-box">
              <div class="tag-box">
                <div class="item">异常处置</div>
              </div>
              <div class="value-box">
                <div class="value1-box">
                  <div class="value">15</div>
                  <div class="label">今日待办理</div>
                </div>
                <div class="value1-box">
                  <div class="value">5</div>
                  <div class="label">今日已办理</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="title-box">
        <commonItemTitle title="业务量监控"></commonItemTitle>
      </div>
      <div class="content-box">
        <div class="msg1-box">
          <div class="item-box">
            <div class="left">
              <div class="label">进出口报关单总量</div>
              <div class="value">354535</div>
            </div>
            <div class="right">
              <div class="label">平均通关时间</div>
              <div class="value">354535</div>
            </div>
          </div>
          <div class="item-box">
            <div class="left">
              <div class="label">实征税款</div>
              <div class="value">354535</div>
            </div>
            <div class="right">
              <div class="label">验估补税</div>
              <div class="value">354535</div>
            </div>
          </div>
          <div class="item-box" style="margin-top: 16px">
            <div class="left">
              <div class="label">原产地证数量</div>
              <div class="value">354535</div>
            </div>
            <div class="right">
              <div class="label">减税额</div>
              <div class="value">354535</div>
            </div>
          </div>
          <div class="item-box">
            <div class="left">
              <div class="label">入境货物检验检疫证明数量</div>
              <div class="value">354535</div>
            </div>
            <div class="right">
              <div class="label">无纸化率</div>
              <div class="value">354535</div>
            </div>
          </div>
          <div class="item-box">
            <div class="left">
              <div class="label">进出境船舶艘次</div>
              <div class="value">354535</div>
            </div>
            <div class="right">
              <div class="label">进出境旅客人次</div>
              <div class="value">354535</div>
            </div>
          </div>
        </div>
        <div class="msg2-box">
          <div class="chart-box" id="mid2Chart"></div>
          <div class="black-box">二、1-5.</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import commonItemTitle from "@/components/commonItemTitle.vue";
import * as echarts from "echarts";
import { CaretBottom } from "@element-plus/icons-vue";

import { vue3ScrollSeamless } from "vue3-scroll-seamless";

const chooseArea = ref("1");
const chooseAreaList = ref([
  {
    label: "海关",
    value: "1",
  },
]);
let pendList = ref([
  {
    id: 122,
    company: "上海1",
  },
  {
    id: 122,
    company: "上海2",
  },
  {
    id: 122,
    company: "上海3",
  },
  {
    id: 122,
    company: "上海4",
  },
  {
    id: 122,
    company: "上海5",
  },
  {
    id: 122,
    company: "上海6",
  },
  {
    id: 122,
    company: "上海7",
  },
  {
    id: 122,
    company: "上海8",
  },
  {
    id: 122,
    company: "上海9",
  },
  {
    id: 122,
    company: "上海10",
  },
  {
    id: 122,
    company: "上海10",
  },
  {
    id: 122,
    company: "上海11",
  },
]);
const pendListScrollOptions = ref({
  // limitMoveNum: 6,
  direction: 2,
  singleWidth: 0,
});
const pendListScrollOptions2 = ref({
  // limitMoveNum: 6,
  direction: 2,
  singleWidth: 0,
});
const renderScrollFun = () => {
  let scroll1 = document.getElementById("pendItem")?.offsetWidth;
  pendListScrollOptions.value.singleWidth = scroll1 ? scroll1 : 0;
  let ele2 = document.getElementById("pendItem1") as HTMLElement;
  let scroll2 = ele2?.offsetWidth;
  let marS = window.getComputedStyle(ele2).marginRight;
  let mar = Number(marS.slice(0, marS.length - 2));
  pendListScrollOptions2.value.singleWidth = scroll2 ? scroll2 + mar : 0;
};

const renderMid2Chart = () => {
  let myChart = echarts.init(document.getElementById("mid2Chart")!);
  let option = {
    title: {
      text: `实时进出口报关单量：89`,
      textStyle: {
        color: "#6CF3FF",
        fontSize: 14,
      },
    },
    grid: {
      top: 69,
      bottom: 58,
      left: 47,
      right: 46,
    },
    xAxis: {
      type: "category",
      data: ["已接单教量", "已放行教量", "拟出证教量"],
      //   data: ["1", "3", "3", "4"],
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      axisLabel: {
        color: "#D6FCFF",
        fontSize: 13,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        show: true,
        color: "#38C2FF",
        fontSize: 12,
      },
      splitLine: {
        lineStyle: {
          type: [2, 1],
          color: "rgba(255,255,255,.3)",
        },
      },
    },
    series: [
      {
        data: [122, 22, 24, 45],
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#5AA6FF" },
            { offset: 1, color: "#00CEFF" },
          ]),
        },
        barWidth: 20,
      },
    ],
  };
  option && myChart.setOption(option);
  window.onresize = function (){
    myChart.resize();
  };
};
const resizeRender = () => {
  pendListScrollOptions.value.singleWidth = 0;
  pendListScrollOptions2.value.singleWidth = 0;
  setTimeout(() => {
    renderScrollFun();
  }, 2000);
  renderMid2Chart();
};
onMounted(() => {
  nextTick(() => {
    renderMid2Chart();
    setTimeout(() => {
      renderScrollFun();
    }, 2000);
  });
});
defineExpose({
  resizeRender,
});
</script>

<style scoped lang="scss">
.box1 {
  position: relative;
  padding: 24px 0 0 0;
  box-sizing: border-box;
  .down-box {
    position: absolute;
    top: 8px;
    ::v-deep(.el-select) {
      width: 200px;
    }
    ::v-deep(.el-select__wrapper) {
      background: rgba(60, 95, 164, 1);
      box-shadow: 0 0 0 0;
    }
    ::v-deep(.el-select__placeholder) {
      color: rgba(167, 243, 252, 0.7);
    }
    ::v-deep(.el-select__caret) {
      color: #00b4c4;
    }
  }
  .content-box {
    width: 977px;
    height: 561px;
    padding: 40px 30px 0px 30px;
    box-sizing: border-box;
    background-image: url(@/assets/imgs/mid1Bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    .msg-title {
      height: 25px;
      font-weight: 600;
      font-size: 18px;
      color: #6cf3ff;
      line-height: 24px;
      text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    }
    .msg-box1 {
      display: flex;
      margin-top: 11px;
      .pending-box {
        flex: 1;
        display: flex;
        width: 780px;
        height: 108px;
        padding: 4px 0 4px 4px;
        box-sizing: border-box;
        background: linear-gradient(
          180deg,
          rgba(61, 113, 166, 1) 0%,
          rgba(42, 58, 134, 1) 100%
        );
        // background: rgb(36, 71, 126);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #3b6aa5;

        .msg {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          min-width: 130px;
          height: 100px;
          background: linear-gradient(360deg, #0050d0 0%, #00baff 100%);
          border-radius: 4px 4px 4px 4px;
          .value {
            display: flex;
            align-items: center;
            height: 40px;
            font-weight: 900;
            font-size: 30px;
            color: #6cf3ff;
            line-height: 24px;
            text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          }
          .label {
            font-weight: 600;
            font-size: 14px;
            color: #6cf3ff;
            line-height: 24px;
            text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          }
        }
        .scroll-wrap {
          // height: 400px;
          width: calc(100% - 130px);
          margin: 0 auto;
          overflow: hidden;
        }
        .list-box {
          display: flex;
          // width: calc(100% - 130px);
          margin-left: 2px;
          overflow: hidden;
          .item-box {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-width: 91px;
            height: 100px;
            .avatar {
              width: 42px;
              height: 42px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .number {
              position: absolute;
              bottom: 34px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 38px;
              height: 18px;
              background: linear-gradient(180deg, #1ad3ff 0%, #0058ff 100%);
              font-weight: 600;
              font-size: 12px;
              color: #ccfbff;
              border-radius: 9px 9px 9px 9px;
            }
            .label {
              width: 72px;
              height: 17px;
              margin-top: 15px;
              font-size: 12px;
              color: #6cf3ff;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .item-box:first-of-type {
            // background: linear-gradient(
            //   360deg,
            //   rgba(46, 126, 255, 0.2) 0%,
            //   rgba(0, 186, 255, 0.5) 100%
            // );
            background: linear-gradient(
              360deg,
              rgba(46, 126, 255, 0.2) 0%,
              rgba(0, 186, 255, 0.5) 100%
            );
            border-radius: 4px 4px 4px 4px;
          }
        }
      }
      .finish-box {
        position: relative;
        width: 128px;
        height: 108px;
        margin-left: 8px;
        .bg {
          position: absolute;
          bottom: 0;
          width: 130px;
          height: 116px;
          z-index: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .msg {
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          // background: linear-gradient(
          //   180deg,
          //   rgba(106, 210, 255, 0.8) 0%,
          //   rgba(105, 194, 255, 0.47) 18%,
          //   rgba(103, 120, 255, 0.3) 100%
          // );
          // border-radius: 4px 4px 4px 4px;
          // border: 1px solid #3a77be;
          .value {
            display: flex;
            align-items: center;
            height: 40px;
            font-weight: 900;
            font-size: 30px;
            color: #6cf3ff;
            // background: linear-gradient( 180deg, rgba(106,210,255,0.8) 0%, rgba(103,120,255,0.8) 100%);
            line-height: 24px;
            text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          }
          .label {
            font-weight: 600;
            font-size: 14px;
            color: #4bc8ff;
            line-height: 24px;
            text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          }
        }
      }
    }
    .scroll-wrap {
      // height: 400px;
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
    }
    .msg-box2 {
      display: flex;
      width: 100%;
      height: 303px;
      margin-top: 27px;
      overflow: hidden;
      .item-box {
        position: relative;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 218px;
        margin-right: 15px;
        .number {
          position: absolute;
          top: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 151px;
          height: 62px;
          background: linear-gradient(360deg, #6388c4 0%, #4976ae 100%);
          border-radius: 31px 31px 31px 31px;
          font-weight: 900;
          font-size: 16px;
          color: #6cf3ff;
          text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          border-radius: 31px 31px 31px 31px;
          z-index: 1;
        }
        .avatar-box {
          position: absolute;
          top: 31px;
          width: 218px;
          height: 121px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .msg-box {
          position: absolute;
          top: 150px;
          width: 218px;
          height: 151px;
          background: linear-gradient(180deg, #3580c1 0%, #3c57ba 100%);
          border-radius: 0px 0px 6px 6px;
          border: 1px solid #3b6aa5;

          .tag-box {
            padding: 11px 13px 0px 13px;
            box-sizing: border-box;
            .item {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 60px;
              height: 25px;
              background: linear-gradient(
                360deg,
                rgba(46, 126, 255, 0.5) 0%,
                rgba(21, 156, 255, 0.4) 100%
              );
              font-weight: 400;
              font-size: 12px;
              color: #9bd9ff;
              border-radius: 4px 4px 4px 4px;
            }
            .act {
              background: linear-gradient(360deg, #1a72ff 0%, #00baff 100%);
              border-radius: 4px 4px 4px 4px;
            }
          }
          .value-box {
            display: flex;
            margin-top: 35px;
            padding: 0 13px;
            box-sizing: border-box;
            .value1-box {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              .value {
                height: 33px;
                font-weight: 900;
                font-size: 24px;
                color: #6cf3ff;
                text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
              }
              .label {
                margin-top: 4px;
                font-size: 12px;
                color: #4bc8ff;
              }
            }
            .value1-box:last-of-type {
              border-left: 1px solid #4977c9;
            }
          }
        }
      }
    }
  }
}
.box2 {
  margin-top: 9px;
  .title-box {
  }
  .content-box {
    display: flex;
    width: 975px;
    height: 304px;
    padding: 19px 29px 0 20px;
    margin-top: -3px;
    box-sizing: border-box;
    // background: linear-gradient(
    //   180deg,
    //   rgba(0, 98, 181, 0.85) 0%,
    //   rgba(8, 47, 136, 0.95) 100%
    // );
    background: linear-gradient(
      180deg,
      rgba(15, 86, 141, 0.8) 0%,
      rgba(11, 57, 142, 1) 100%
    );

    .msg1-box {
      flex: 1;
      .item-box {
        display: flex;
        margin-bottom: 4px;
        .left,
        .right {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 46px;
          padding: 0 16px;
          box-sizing: border-box;
          // background: linear-gradient(
          //   180deg,
          //   rgba(106, 210, 255, 0.8) 0%,
          //   rgba(103, 120, 255, 0.8) 100%
          // );
          background: linear-gradient(
            180deg,
            rgba(42, 134, 193, 1) 0%,
            rgba(38, 84, 185, 1) 100%
          );
          border-radius: 4px 4px 4px 4px;
          .label {
            font-size: 14px;
            color: #6cf3ff;
            text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          }
          .value {
            margin-left: 5px;
            font-size: 14px;
            color: #6cf3ff;
            text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          }
        }
        .right {
          margin-left: 3px;
        }
      }
    }
    .msg2-box {
      position: relative;
      flex: 1;
      margin-left: 16px;
      height: 258px;
      background: linear-gradient(180deg, #005cf0 0%, #0098db 100%);
      border-radius: 4px 4px 4px 4px;
      .chart-box {
        width: 100%;
        height: 258px;
      }
      .black-box {
        position: absolute;
        right: 0px;
        bottom: -40px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 30px;
        background: #000000;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 13px;
        color: #76eaff;
        border-radius: 4px 4px 4px 4px;
        opacity: 0.5;
      }
    }
  }
}
</style>
